<template>
    <div class="container">
        <div class="main">
            <div class="title">
                <h1>电商后台管理系统</h1>
            </div>
            <el-form class="form" :model="userModel" ref="form" :size="'large'">
                <el-form-item>
                    <el-input v-model.trim="userModel.name" prefix-icon="User" placeholder="请输入用户名"
                              class="input"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.tr.trim="userModel.password" prefix-icon="Lock" placeholder="请输入密码" show-password
                              autocomplete="new-password" class="input"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="input" :disabled="disabled" type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
import {reactive} from "vue";
import {mapGetters} from "vuex";
import {ElMessage} from "element-plus";

export default {
    name: "LoginPage",
    data() {
        return {
            userModel: reactive({
                name: "",
                password: ""
            })
        }
    },
    computed: {
        disabled() {
            return this.userModel.name.length === 0 || this.userModel.password.length === 0
        },
        ...mapGetters(["isLogin"])
    },
    methods: {
        login() {
            this.$store.commit("loginUser", {
                username: this.userModel.name,
                password: this.userModel.password
            })
            if (this.isLogin) {
                ElMessage({
                    type: "success",
                    message: "登录成功",
                    duration: 3000
                })
                setTimeout(() => {
                    this.$router.push({name: "homepage"})
                }, 3000)
            } else {
                ElMessage({
                    type: "error",
                    message: "登录失败，用户名或密码错误",
                    duration: 3000
                })
            }
        }
    }
}
</script>

<style scoped>

.container {
    height: 100%;
    width: 100%;
    position: absolute;
    background: linear-gradient(rgb(65, 63, 63), rgb(24, 24, 24));
    box-sizing: border-box;
    text-align: center;
}

.title {
    color: azure;
    margin: 30px;
}
.input{
    width: 100%;
}
.main{
    text-align: center;
    vertical-align: center;
    margin: calc(50vh - 150px) auto 0;
    width: 500px;
}
.form{



}
</style>